<!DOCTYPE html>
<html>
	<head>
		<title>beetl演示demo</title>
		<!-- 和JSP一样的 可以使用 include -->
		<!-- #include('base_top.html'){} -->
		<style type="text/css">#dept{-webkit-appearance:none}</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3">
					<form id="userform" method="post" action="/sxd/user/add">
						<fieldset>
							<legend>部门信息设置</legend>
							<div class="form-group">
								<label for="add_dept">添加部门</label>
								<div class="input-group">
									<input type="text" class="form-control" id="add_dept" placeholder="输入名称添加部门" maxlength="20"/>
									<span class="input-group-btn">
										<button type="button" class="btn btn-default" id="add_dept_btn" disabled="disabled"><i class="fa fa-plus"></i></button>
									</span>
								</div>
							</div>
						</fieldset>
						<fieldset>
							<legend>员工信息设置</legend>
							<div class="form-group">
								<label for="dept">选择部门</label>
								<div class="input-group">
									<select id="dept" class="form-control" name="u.deptid">
										<!-- #for(var dept in deptList){ -->
										<option value="${dept.id}">${dept.name}</option>
										<!-- #}elsefor{ -->
										<!-- 当没进for循环的时候可以写一个elsefor -->
										<option>请添加部门</option>
										<!-- #} -->
									</select>
									<span class="input-group-btn">
										<button class="btn btn-default" type="button" id="remove_dept" disabled="disabled"><i class="fa fa-times"></i></button>
									</span>
								</div>
							</div>
							<div class="form-group">
								<label for="user_name">员工姓名</label>
								<input type="text" placeholder="请输入员工姓名" class="form-control" id="user_name" name="u.name" maxlength="20"/>
							</div>
							<div class="form-group">
								<label>员工性别</label>
								<div class="radio">
									<label class="gender_m">
										<input type="radio" id="gender_m" name="u.gender" value="男" checked="checked">男
									</label>
									<label class="gender_f">
										<input type="radio" id="gender_f" name="u.gender" value="女">女
									</label>
								</div>
							</div>
						</fieldset>
						<button type="button" class="btn btn-default" id="adduser"><i class="fa fa-plus"></i> 添加用户</button>
					</form>
				</div>
				<div class="col-sm-9">
					<table class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th>#</th>
								<th>ID</th>
								<th>姓名</th>
								<th>性别</th>
								<th>部门名称</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<!-- #for(var user in userPage.list){ -->
								<tr>
									<td>${userLP.index}</td>
									<td>${user.id}</td>
									<td>${user.name}</td>
									<td><span class="label label-${@user.getGender().ordinal()==0?'primary':'danger'}">${user.gender}</span></td>
									<td>${user.tails.dname}</td>
									<td><button class="btn btn-default" type="button" onclick="delUser(${user.id})"><i class="fa fa-times"></i></button></td>
								</tr>
							<!-- #}elsefor{ -->
								<tr>
									<td colspan="5">暂无数据</td>
								</tr>
							<!-- #} -->
						</tbody>
					</table>
					<div id="page" data-max="${userPage.totalPage}" data-now="${userPage.pageNumber}" data-href="/sxd/{page}"></div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="/static/js/page.js"></script>
	<script type="text/javascript">
	$(function(){
		$(document).on('ajaxError',function(e){
			$.tips('网络遇到错误！')
			console.log(e)
		})
		$('#page').page();
		var add_dept_btn = $('#add_dept_btn').on('click',function(){
			$.post('/sxd/dept/add',{name:$('#add_dept').val()})
			.then(function(json){
				$.tips(json.msg)
				json.err||(reloadDept(),$('#add_dept').val(''));
			})
		})
		var del_dept_btn=$('#remove_dept').on('click',function(){
			$.confirm('确定要删除该部门吗？',function(e){
				e&&$.post('/sxd/dept/del/'+$('#dept').val())
				.then(function(json){
					$.tips(json.msg)
					json.err||reloadDept();
				})
			})
		})
		$('#add_dept').on('input',function(){
			add_dept_btn.prop('disabled',!this.value);
		})
		var dept = $('#dept').on('change',function(){
			del_dept_btn.prop('disabled',!/\d+/.test(this.value));
		}).trigger('change')
		$('#adduser').on('click',function(){
			if(!/\d+/.test(dept.val())){
				$.tips('请先选择一个部门！')
			}else if(!$('#user_name').val()){
				$.tips('请填写员工姓名！')
			}else{
				var form = $('#userform');
				$.post(form.attr('action'),form.serialize())
				.then(function(json){
					json.err?$.tips(json.msg):$.alert(json.msg,function(){location.reload()})
				})
			}
		})
	})
	
	function reloadDept(){
		$.get('/sxd/dept/list')
		.then(function(json){
			if(json.length){
				var options = '';
				$.each(json,function(i,d){
					options+='<option value="'+d.id+'">'+d.name+'</option>'
				})
				$('#dept').html(options).trigger('change');
			}
		})
	}
	
	function delUser(uid){
		$.post('/sxd/user/del/'+uid)
		.then(function(json){
			json.err?$.tips(json.msg):$.alert(json.msg,function(){location.reload()})
		})
	}
	</script>
</html>